<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- 任务进度模态框 -->
    <div th:fragment="progressModal" class="hidden fixed inset-0 z-50 overflow-y-auto" id="taskProgressModal">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 transition-opacity">
                <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>
            
            <div class="relative bg-white rounded-lg max-w-lg w-full mx-auto shadow-xl transform transition-all">
                <div class="p-6">
                    <div class="flex justify-between items-center pb-3 border-b">
                        <h3 class="text-lg font-medium text-gray-900">
                            <span id="taskProgressTitle">任务进度</span>
                        </h3>
                        <button id="closeProgressModal" class="text-gray-400 hover:text-gray-500">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    
                    <div class="space-y-4 py-4">
                        <!-- 任务信息 -->
                        <div>
                            <p class="text-sm text-gray-500" id="taskProgressDescription">
                                正在处理您的请求，请耐心等待...
                            </p>
                        </div>
                        
                        <!-- 进度条 -->
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="taskProgressBar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-500" style="width: 0%"></div>
                        </div>
                        
                        <!-- 进度百分比 -->
                        <div class="text-right">
                            <span id="taskProgressPercentage" class="text-sm font-medium text-gray-500">0%</span>
                        </div>
                        
                        <!-- 任务状态 -->
                        <div id="taskStatusContainer" class="p-3 bg-gray-50 rounded-md hidden">
                            <p id="taskStatusMessage" class="text-sm text-gray-700"></p>
                        </div>
                    </div>
                    
                    <div class="pt-4 border-t flex justify-end gap-2">
                        <button id="taskCancelButton" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
                            取消
                        </button>
                        <button id="taskConfirmButton" class="hidden px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
                            确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 任务进度相关JavaScript -->
    <script th:fragment="progressScripts">
        // 显示任务进度模态框
        function showTaskProgressModal(title) {
            const modal = document.getElementById('taskProgressModal');
            const titleEl = document.getElementById('taskProgressTitle');
            const progressBar = document.getElementById('taskProgressBar');
            const progressPercentage = document.getElementById('taskProgressPercentage');
            const statusContainer = document.getElementById('taskStatusContainer');
            const statusMessage = document.getElementById('taskStatusMessage');
            const confirmButton = document.getElementById('taskConfirmButton');
            
            // 重置状态
            titleEl.textContent = title || '任务进度';
            progressBar.style.width = '0%';
            progressPercentage.textContent = '0%';
            statusContainer.classList.add('hidden');
            statusMessage.textContent = '';
            confirmButton.classList.add('hidden');
            
            // 显示模态框
            modal.classList.remove('hidden');
        }
        
        // 隐藏任务进度模态框
        function hideTaskProgressModal() {
            const modal = document.getElementById('taskProgressModal');
            modal.classList.add('hidden');
        }
        
        // 更新任务进度
        function updateTaskProgress(progress, message) {
            const progressBar = document.getElementById('taskProgressBar');
            const progressPercentage = document.getElementById('taskProgressPercentage');
            const description = document.getElementById('taskProgressDescription');
            
            progressBar.style.width = progress + '%';
            progressPercentage.textContent = progress + '%';
            
            if (message) {
                description.textContent = message;
            }
        }
        
        // 显示任务状态消息
        function showTaskStatus(message, isError) {
            const statusContainer = document.getElementById('taskStatusContainer');
            const statusMessage = document.getElementById('taskStatusMessage');
            const confirmButton = document.getElementById('taskConfirmButton');
            
            statusContainer.classList.remove('hidden');
            
            if (isError) {
                statusContainer.classList.add('bg-red-50');
                statusMessage.classList.add('text-red-700');
            } else {
                statusContainer.classList.add('bg-green-50');
                statusMessage.classList.add('text-green-700');
            }
            
            statusMessage.textContent = message;
            confirmButton.classList.remove('hidden');
        }
        
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            const closeButton = document.getElementById('closeProgressModal');
            const cancelButton = document.getElementById('taskCancelButton');
            const confirmButton = document.getElementById('taskConfirmButton');
            
            if (closeButton) {
                closeButton.addEventListener('click', hideTaskProgressModal);
            }
            if (cancelButton) {
                cancelButton.addEventListener('click', hideTaskProgressModal);
            }
            if (confirmButton) {
                confirmButton.addEventListener('click', hideTaskProgressModal);
            }
        });
    </script>
</body>
</html> 